<template>
	<view>
		<view class="header">
			<u-navbar :border-bottom='false' back-icon-size='48' title="我的推广" :background="background" title-color='#FFFFFF'
			 back-icon-color='#FFFFFF'></u-navbar>
			<view class="userBox">
				<image class="head-pic" :src="userInfo.head_pic" mode=""></image>
				<view class="info">
					<view class="name">
						{{userInfo.nickname}}
					</view>
					<view class="level" v-if="userInfo.user_level== 0">
						<image src="../../../../static/imgs/vipicon1.png" mode=""></image><text>普通会员</text>
					</view>
					<view class="level" v-if="userInfo.user_level== 2">
						<image src="../../../../static/imgs/vipicon2.png" mode=""></image><text>VIP</text>
					</view>
					<view class="level" v-if="userInfo.user_level== 4">
						<image src="../../../../static/imgs/vipicon3.png" mode=""></image><text>合伙人</text>
					</view>
				</view>
			</view>
		</view>
		<view class="teamBox">
			<view class="title">
				团队总人数
			</view>
			<view class="teamNum">
				<view class="teamNum-item" v-for="(item,index) in total" :key='index'>
					<text class="num">{{item.user_count}}</text>
					<text class="tit">{{item.user_level== 0?'会员':item.user_level==1?'VIP':item.user_level==3?'门店':'合伙人'}}</text>
				</view>
			</view>
		</view>
		<view class="select-box" @click="showPicker=true">
			<view class="text">
				{{choseText}}
			</view>
			<u-icon name="arrow-down" color="#666666" size="28"></u-icon>
		</view>
		<view class="content" v-if="inviteList.length">
			<view class="cell-ul">
				<view class="cell-li" v-for="(item,index) in inviteList" :key='index'>
					<view class="left" @click="clickItem(item)">
						<image class="headPic" :src="item.head_pic" mode=""></image>
						<view class="info">
							<view class="name">
								<text>{{item.nickname}}</text>
								<!-- <view class="tjian" @click="navTo('./indirect')">
									推荐<u-icon name="arrow-right" color="#3587F7" size="24"></u-icon>
								</view> -->
							</view>
							<view class="num">
								ID：{{item.user_id}}
							</view>
						</view>
					</view>
					<view class="add">
						<u-icon name="plus-circle" color="#666666" size="40"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="noCont" v-else>
			<u-empty text="暂无记录" mode="list"></u-empty>
		</view>
		<u-popup v-model="showPop" mode="center" border-radius="16" :closeable='true'>
			<view class="container">
				<view class="title">
					{{showUser.user_level_name}}信息
				</view>
				<view class="container-li">
					<view class="lable">
						用户ID
					</view>
					<view class="cont">
						{{showUser.user_id}}
					</view>
				</view>
				<view class="container-li">
					<view class="lable">
						推荐人ID
					</view>
					<view class="cont">
						{{showUser.recommend_user_id}}
					</view>
				</view>
				<view class="container-li">
					<view class="lable">
						姓名
					</view>
					<view class="cont">
						{{showUser.username}}
					</view>
				</view>
				<view class="container-li">
					<view class="lable">
						昵称
					</view>
					<view class="cont">
						{{showUser.nickname}}
					</view>
				</view>
				<view class="container-li">
					<view class="lable">
						手机号
					</view>
					<view class="cont">
						{{showUser.mobile}}
					</view>
				</view>
				<view class="container-li">
					<view class="lable">
						区域
					</view>
					<view class="cont">
						{{showUser.city}}{{showUser.district}}
					</view>
				</view>
				<view class="container-li">
					<view class="lable">
						身份
					</view>
					<view class="cont">
						{{showUser.user_level_name}}
					</view>
				</view>
			</view>
		</u-popup>
		<u-picker mode="selector" v-model="showPicker" :default-selector="[0]" :range="selector" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				choseText: '会员',
				showPop: false,
				selector: ['会员', 'VIP', '合伙人'],
				showPicker: false,
				background: {
					backgroundColor: 'rgba(255,255,255,0)'
				},
				page: '1',
				type: 0,
				total: [],
				inviteList: [],
				userInfo: {},
				showUser: {}
			}
		},
		onLoad() {
			this.getPromote()
			this.userInfo = this.$store.state.userInfo
		},
		onReachBottom() {
			let page = Number(this.page) + 1
			this.page = page.toString()
			this.getPromote()
		},
		methods: {
			async getPromote() {
				let {
					page,
					type
				} = this
				let res = await myRequest.getMyinvite({
					page: page,
					type: type.toString()
				})
				if (res.status) {
					this.inviteList = [...this.inviteList,...res.data]
					this.total = res.statistics
				}
			},
			clickItem(item) {
				this.showUser = item
			},
			confirm(val) {
				let index = val[0]
				this.choseText = this.selector[index]
				this.page = '1'
				this.inviteList = []
				if (index == 0) {
					this.type = 0
				}
				if (index == 1) {
					this.type = 1
				}
				if (index == 2) {
					this.type = 4
				}
				this.getPromote()
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 438rpx;
		background: #FFFFFF;
		@include bgi('../../../../static/imgs/wodetgbgi.png');

		.userBox {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.head-pic {
				margin-left: 30rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			.info {
				margin-left: 40rpx;

				.name {
					font-size: 34rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #FFFFFF;
				}

				.level {
					margin-top: 12rpx;
					width: fit-content;
					height: 48rpx;
					background: rgba(255, 255, 255, 0.48);
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					padding-left: 4rpx;
					padding-right: 8rpx;

					image {
						width: 32rpx;
						height: 32rpx;
					}

					text {
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #2671D6;
					}
				}
			}
		}
	}

	.teamBox {
		margin: -116rpx auto 0;
		width: 710rpx;
		height: 232rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 20rpx rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;

		.title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			padding-top: 30rpx;
			padding-left: 30rpx;
			margin-bottom: 30rpx;
		}

		.teamNum {
			display: flex;
			padding: 0 10rpx;

			.teamNum-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.num {
					font-size: 36rpx;
					font-family: Arial;
					font-weight: bold;
					color: #333333;
				}

				.tit {
					margin-top: 20rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
		}
	}

	.select-box {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		padding-left: 40rpx;

		.text {
			margin-right: 8rpx;
		}
	}

	.content {
		width: 100%;
		height: auto;
		padding: 0 20rpx;
		background-color: #FFFFFF;

		.cell-ul {
			width: 100%;
			height: auto;

			.cell-li {
				width: 100%;
				height: 140rpx;
				border-bottom: 2rpx solid #F2F2F2;
				display: flex;
				align-items: center;

				&:last-child {
					border-bottom: none;
				}

				.left {
					display: flex;
					align-items: center;

					.headPic {
						width: 72rpx;
						height: 72rpx;
						border-radius: 50%;
					}

					.info {
						margin-left: 30rpx;

						.name {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #333333;
							display: flex;
							align-items: center;

							.tjian {
								width: 108rpx;
								height: 46rpx;
								background: #E7F3FF;
								border-radius: 40rpx;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400;
								line-height: 46rpx;
								color: #3587F7;
								text-align: center;
								margin-left: 34rpx;
							}

						}

						.num {
							margin-top: 8rpx;
							font-size: 28rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #666666;
						}
					}
				}

				.add {
					margin-left: auto;
				}
			}
		}
	}

	.container {
		width: 592rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 16rpx;

		.title {
			width: 100%;
			height: 120rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #333333;
			border-bottom: 2rpx solid #F2F2F7;
		}

		.container-li {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;

			.lable {
				width: 30%;
				padding-left: 26rpx;
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #999999;
			}

			.cont {
				width: 70%;
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.noCont {
		padding-top: 240rpx;
	}

	/deep/ .u-picker-body {
		height: 300rpx !important;
	}
</style>
